<template>
  <div>
    <h2>My Friends</h2>
    <div class="tabs">
      <el-tabs v-model="tabActiveName">
        <el-tab-pane label="friend's todo" name="first">
          <FriendsTodo></FriendsTodo>
        </el-tab-pane>
        <el-tab-pane label="friend's message" name="second">
          <FriendsMessage></FriendsMessage>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import FriendsMessage from "../components/friends/friendsMessage"
  import FriendsTodo from "../components/friends/friendsTodo"

  export default {
    name: "Friends",
    components: {
      FriendsMessage,
      FriendsTodo,
    },
    data() {
      return {
        tabActiveName: "first",
      }
    },
  }
</script>

<style>
  .tabs {
    border-radius: 4px;
    padding-right: 20em;
    padding-left: 20em;
  }
</style>
